import React from 'react'
import styles from './index.module.less'
import CAT from './img/cat.jpg'
import { Switch, Input, Radio, Select, InputNumber, Checkbox, Button, Form, DatePicker } from 'antd'
import classNames from 'classnames'
import dataList from './data'

const { MonthPicker, RangePicker, WeekPicker, YearPicker } = DatePicker
const { Option } = Select
const CheckboxGroup = Checkbox.Group

const ShowData = () => {
	return (
		<div className={styles.container2}>
			{dataList.map((item, idx) => {
				return (
					<div
						key={item.uuid}
						className={classNames(styles.node)}
						style={{ top: item.top, left: item.left, zIndex: item.zIndex }}
					>
						{item.type === 'text' && (
							<div
								style={{
									fontSize: item.fontSize,
									color: item.color,
								}}
							>
								{item.value}
							</div>
						)}
						{item.type === 'number' && <InputNumber type="number" />}
						{item.type === 'button' && (
							<Button
								type={item.btnType || 'default'}
								ghost={item.btnType !== 'default' && item.simple}
								size={item.size}
								style={{ fontSize: item.fontSize || 14 }}
							>
								{item.value}
							</Button>
						)}
						{item.type === 'switch' && (
							<Switch defaultChecked checkedChildren={item.onText} unCheckedChildren={item.offText} />
						)}
						{item.type === 'image' && <img src={CAT} alt="" />}
						{item.type === 'textInput' && <Input />}
						{item.type === 'radio' && (
							<Radio.Group value={1}>
								{item.options &&
									item.options.length > 0 &&
									item.options.map((i, t) => (
										<Radio value={i.value} key={t}>
											{i.label}
										</Radio>
									))}
							</Radio.Group>
						)}
						{item.type === 'checkbox' && (
							<CheckboxGroup value={item.value}>
								{item.options &&
									item.options.length > 0 &&
									item.options.map((i, t) => (
										<Checkbox key={t} value={i.value}>
											{i.label}
										</Checkbox>
									))}
							</CheckboxGroup>
						)}
						{item.type === 'select' && (
							<Select value={item.options[0].value}>
								{item.options &&
									item.options.length > 0 &&
									item.options.map((i, t) => (
										<Option key={t} value={i.value}>
											{i.label}
										</Option>
									))}
							</Select>
						)}
						{/*日期选择器*/}
						{item.type === 'datepicker' && item.pickerType === 'default' && <DatePicker value={item.value} />}
						{item.type === 'datepicker' && item.pickerType === 'year' && <YearPicker value={item.value} />}
						{item.type === 'datepicker' && item.pickerType === 'month' && <MonthPicker value={item.value} />}
						{item.type === 'datepicker' && item.pickerType === 'week' && <WeekPicker value={item.value} />}
						{item.type === 'datepicker' && item.pickerType === 'range' && (
							<RangePicker
								value={[
									item.startField ? item[item.startField] : item.startTime,
									item.endField ? item[item.endField] : item.endTime,
								]}
							/>
						)}
					</div>
				)
			})}
		</div>
	)
}

export default ShowData
